
<template>
  <div class="myinfo">
    <div class="c-card">
      <div class="play-list-item-header">
        <u-section title="添加打龟" :right="false" :font-size="32" color="rgb(254, 129, 5)"></u-section>
      </div>
      <u-form :model="form" ref="uForm" label-width="auto" :rules="rules">
        <u-form-item label="时间" prop="publish_time">
          <div class="select" @click="openShow('time')">
            <div class="select-value">{{ form.publish_time }}</div>
            <u-icon name="arrow-right" color="#666" size="28"></u-icon>
          </div>
        </u-form-item>
        <u-form-item label="打龟心得" label-position="top">
          <u-input input-align="left"  v-model="form.remark" type="textarea" placeholder="请输入打龟心得"/>
        </u-form-item>
        <u-form-item label="打龟点" prop="image">
          <u-upload ref="uploadRef" :action="action" max-count="1" :file-list="fileList" @on-success="successFile" @on-remove="removeFile"></u-upload>
        </u-form-item>
      </u-form>
    </div>
    <div class="primary-button" @click="submit" style="margin-bottom: 20rpx">保存</div>
    <u-picker
        confirm-color="rgb(254, 129, 5)"
        cancel-color="rgb(254, 129, 5)"
        :params="{
                year: true,
                month: true,
                day: true
              }"
        mode="time"
        @confirm="onConfirmDate"
        v-model="show.time"></u-picker>
  </div>
</template>
<script>
export default {
  name: "myinfo",
  data() {
    return {
      form: {
        publish_time: '',
        remark: '',
        image: ''
      },
      rules: {
        publish_time: [
          { required: true, message: '请选择时间', trigger: 'blur' }
        ],
      },
      action: this.$baseUrl + '/api/upload/file',
      fileList: [],
      show: {
        time: false,
      },
    }
  },
  onShow() {
  },
  methods: {
    successFile(e) {
      this.form.image = e.data.url
    },
    removeFile() {
      this.form.image = ''
    },
    submit() {
      if (!this.$store.state.userInfo.id) {
        uni.showToast({
          title: '请先登录',
          icon: 'none',
          duration: 2000
        })
        return
      }
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.$api.createTurtle({
            ...this.form,
            member_id: this.$store.state.userInfo.id
          }).then(res => {
            uni.showToast({
              title: '添加成功',
              icon: 'success',
              duration: 2000
            })
            this.form = {
              publish_time: '',
              remark: '',
              image: ''
            }
            this.$refs.uploadRef.clear();
          })
        }
      })
    },
    logout() {

    },
    openShow(e) {
      console.log(e)
      this.show[e] = true
    },
    onConfirmDate(e) {
      console.log(e)
      this.form.publish_time = `${e.year}-${e.month}-${e.day}`
    },
  }
}
</script>
<style lang="scss">
.myinfo {
  height: 100%;
  background-color: #F5F7FA;
  padding: 20rpx;
  .select {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .primary-button {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    line-height: 41px;
    font-size: 16px;
    color: #fff;
    background-color: rgb(254, 129, 5);
    border-radius: 5px;
    box-sizing: border-box;
  }
  .primary-button2 {
    background-color: #FF0000;
  }
  .c-card {
    background-color: #ffffff;
    border-radius: 14rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    .play-list-item-header-desc {
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      color: #666;
      border-bottom: 1px solid #f0f0f0;
    }
    .play-list-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      .status {
        color: rgb(254, 129, 5);
        flex-shrink: 0;
      }
    }
  }
}
</style>